<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .cls {
        background-color: black;
    }
</style>
<script src="./jquery-1.12.2.js"></script>
<script>
    // $(function() {
    //     $('#btn').click(function() {
    //         if ($('body').hasClass('cls')) {
    //             $('body').removeClass('cls')
    //             $(this).val('关灯') //当val（）方法有参数的时候，就是设置元素的value属性值
    //                 //当val（） 没有参数的时候就是获取元素的value值
    //         } else {
    //             $('body').addClass('cls')
    //             $(this).val('开灯')
    //         }
    //     })
    // })



    //切换类样式
    $(function() {
        $('#btn').click(function() {
            $('body').toggleClass('cls') //当元素使用了cls类样式的时候就会移除类样式
                //当元素没有使用cls类样式的时候就会添加类样式


        })
    })
</script>

<body>
    <input type="button" value="开关灯" id="btn">
</body>

</html>